<template>
  <div class="hello">
    <mu-appbar title="Title">
      <mu-icon-button icon='menu' slot="left" />
      <mu-icon-menu icon="more_vert" slot="right">
        <mu-menu-item title="菜单 1"/>
        <mu-menu-item title="菜单 2"/>
        <mu-menu-item title="菜单 3"/>
      </mu-icon-menu>
    </mu-appbar>
    <mu-flexbox orient="vertical">
      <mu-flexbox-item class="head">
        <mu-paper circle :zDepth="2" class="avatar">
          <mu-avatar :src="avatar" :size="68" backgroundColor="#ffffff" />
        </mu-paper>
      </mu-flexbox-item>
      <mu-divider/>
      <mu-flexbox-item>
        <p>content 测试内容</p>
      </mu-flexbox-item>
    </mu-flexbox>
    <mu-paper class="bottom-nav">
      <mu-bottom-nav :value="bottomNav" @change="handleChange">
        <mu-bottom-nav-item value="recents" title="Recents" icon="restore" />
        <mu-bottom-nav-item value="favorites" title="Favorites" icon="favorite" />
        <mu-bottom-nav-item value="nearby" title="Nearby" icon="location_on" />
      </mu-bottom-nav>
    </mu-paper>
  </div>
</template>

<script>
import avatar from '../assets/logo.png'
export default {
  name: 'hello',
  data () {
    return {
      bottomNav: 'recents',
      avatar
    }
  },
  methods: {
    handleChange(val){
      this.bottomNav = val;
      console.log(val)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bottom-nav{
  position: fixed;
  bottom: 0;
  width: 100%
}
.avatar{
  height: 68px;
  width: 68px;
  margin: 10px auto;
}
.head{
  height: 100px
}
</style>
